<template>
    <div class="container-announ-auth">
        <a-modal width="1300px" :visible="visible" title="信息详情" @cancel="closeModal" class="yuan-modal KJRDetail-edit"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="yuan-form">
                    <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                        :class="isShow?'disable-form':''" :label-col="{ style: { width: '160px' } }"
                        :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">
                        <div class="form-panel">
                            <div class="form-panel-box yuan-form-col3">
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="编号" prop="number">
                                    <a-input class="yuan-form-input" v-model="formData.number" placeholder="请输入"></a-input>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="发布时间" prop="publicityTime">
                                    <a-date-picker class="yuan-form-input" placeholder="发布时间" v-model="formData.publicityTime"
                                        inputReadOnly valueFormat="YYYY-MM-DD" />
                                </a-form-model-item>
                                <div></div>
                                <a-form-model-item class="yuan-form-item" label="科技成果名称" prop="">
                                    <span class="yuan-form-input">{{rowInfo.achievementName}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="科技成果种类" prop="">
                                    <span class="yuan-form-input">{{rowInfo.achievementCategory}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="转化方式" prop="conversionWay">
                                    <a-radio-group v-model="formData.conversionWay">
                                        <a-radio value="转让">转让</a-radio>
                                        <a-radio value="许可">许可</a-radio>
                                        <a-radio value="其他">其他</a-radio>
                                    </a-radio-group>
                                </a-form-model-item>
                            </div>
                        </div>

                        <div class="form-panel">

                            <div class="form-title">科技人员取得职务科技成果转化现金奖励信息</div>
                            <div class="form-panel-box yuan-form-col5">

                                <a-form-model-item class="yuan-form-item" label="取得转化收入金额(万元)" prop="gainConversionMoney"
                                    :label-col="{ style: { width: '180px' } }"
                                    :wrapper-col="{ style: { width: 'calc(100% - 180px)' } }">
                                    <a-input class="yuan-form-input" v-model="formData.gainConversionMoney"
                                        placeholder="取得转化收入金额"></a-input>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="取得转化收入时间" prop="conversionIncomeTime"
                                    :label-col="{ style: { width: '170px' } }"
                                    :wrapper-col="{ style: { width: 'calc(100% - 170px)' } }" v-if="userType==='system' && !isShow">
                                    <a-date-picker class="yuan-form-input" placeholder="取得转化收入时间"
                                        v-model="formData.conversionIncomeTime" inputReadOnly valueFormat="YYYY-MM-DD" />
                                </a-form-model-item>

                                <div class="small-title">科技成果现金奖励人员信息</div>
                                <template v-for="(item,idx) in userListOne">
                                    <div class="user-panel-parent">
                                        <div class="user-panel">
                                            <a-form-model-item class="yuan-form-item" label="姓名"
                                                :prop="'userListOne_'+idx+'_name'">
                                                <a-input class="yuan-form-input" v-model="formData['userListOne_'+idx+'_name']"
                                                    placeholder="姓名"></a-input>
                                            </a-form-model-item>
                                            <a-form-model-item class="yuan-form-item" label="性别"
                                                :prop="'userListOne_'+idx+'_gender'">
                                                <a-select style="width:200px" class="yuan-form-input"
                                                    v-model="formData['userListOne_'+idx+'_gender']" placeholder="请选择性别">
                                                    <a-select-option value="男">男</a-select-option>
                                                    <a-select-option value="女">女</a-select-option>
                                                </a-select>
                                            </a-form-model-item>
                                            <a-form-model-item class="yuan-form-item" label="学院(校内)/单位(校外)"
                                                :prop="'userListOne_'+idx+'_schoolWithinOuter'">
                                                <!-- <a-input class="yuan-form-input"
                                                    v-model="formData['userListOne_'+idx+'_schoolWithinOuter']"
                                                    placeholder="学院（校内）/单位（校外）"></a-input> -->

                                                <a-radio-group v-model="formData['userListOne_'+idx+'_schoolWithinOuter']">
                                                    <a-radio value="校内">校内</a-radio>
                                                    <a-radio value="校外">校外</a-radio>
                                                </a-radio-group>
                                            </a-form-model-item>
                                            <a-form-model-item class="yuan-form-item" label="职务"
                                                :prop="'userListOne_'+idx+'_post'">
                                                <a-input class="yuan-form-input" v-model="formData['userListOne_'+idx+'_post']"
                                                    placeholder="职务"></a-input>
                                            </a-form-model-item>
                                            <a-form-model-item class="yuan-form-item" label="身份证号"
                                                :prop="'userListOne_'+idx+'_identityCard'">
                                                <a-input class="yuan-form-input"
                                                    v-model="formData['userListOne_'+idx+'_identityCard']"
                                                    placeholder="身份证号"></a-input>
                                            </a-form-model-item>
                                            <a-form-model-item class="yuan-form-item" label="贡献比例"
                                                :prop="'userListOne_'+idx+'_contributionRatio'">
                                                <a-input class="yuan-form-input"
                                                    v-model="formData['userListOne_'+idx+'_contributionRatio']"
                                                    placeholder="贡献比例"></a-input>
                                            </a-form-model-item>
                                        </div>
                                        <div class="user-panel-action">
                                            <a-button @click="addUserOne" type="primary" style="margin-bottom:10px">
                                                新增
                                            </a-button>
                                            <a-button @click="delUserOne(idx)" type="danger">
                                                删除
                                            </a-button>
                                        </div>

                                    </div>
                                </template>

                                <div class="small-title">科技成果现金奖励信息</div>
                                <a-form-model-item class="yuan-form-item" label="科技成果现金奖励总额(万元)" prop="achievementAwardRental"
                                    :label-col="{ style: { width: '200px' } }"
                                    :wrapper-col="{ style: { width: 'calc(100% - 200px)' } }">
                                    <a-input class="yuan-form-input" v-model="formData.achievementAwardRental"
                                        placeholder="科技成果现金奖励总额"></a-input>
                                </a-form-model-item>

                                <a-form-model-item class="yuan-form-item" label="现金奖励发放时间" prop="cashBonusTime"
                                    :label-col="{ style: { width: '170px' } }"
                                    :wrapper-col="{ style: { width: 'calc(100% - 170px)' } }" v-if="userType==='system' && !isShow">
                                    <a-date-picker class="yuan-form-input" placeholder="现金奖励发放时间" v-model="formData.cashBonusTime"
                                        inputReadOnly valueFormat="YYYY-MM-DD" />
                                </a-form-model-item>

                                <template v-if="userType==='system' && !isShow">
                                    <div class="small-title">科技成果转化技术合同登记信息</div>
                                    <a-form-model-item class="yuan-form-item" label="技术合同在技术合同登记机构的登记情况"
                                        :label-col="{ style: { width: '280px' } }"
                                        :wrapper-col="{ style: { width: 'calc(100% - 280px)' } }" style="width:90%"
                                        prop="contractRegisterInfo">
                                        <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                            v-model="formData.contractRegisterInfo" placeholder="请输入科技成果转化技术合同登记信息"
                                            :maxLength="200" />
                                    </a-form-model-item>

                                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="公示时间" prop="staffPublicity">
                                        <a-range-picker class="yuan-form-input" :placeholder="['开始日期','结束日期']"
                                            :format="['YYYY-MM-DD','YYYY-MM-DD']" v-model="formData.staffPublicity" />
                                        <span class="c-danger" v-if="formData.staffPublicity">
                                            公示期：{{getDayNum('staffPublicity')}}天</span>
                                    </a-form-model-item>
                                </template>

                            </div>

                        </div>
                    </a-form-model>
                </div>
            </a-spin>

            <template slot="footer">
                <template v-if="!isShow">
                    <a-button @click="save(1)" type="primary" :loading="loading">
                        保存
                    </a-button>
                    <a-button @click="save(2)" type="danger" v-if="userType==='system'">
                        保存并公示
                    </a-button>
                </template>

                <a-button @click="closeModal">
                    取消
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { getStorageUserInfo } from "@/utils";
import moment from "moment";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: {} }) rowInfo!: any;
    @Prop({ default: {} }) editInfo!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.formData = {};
            this.userListOne = [{ type: "KJRY" }];
            if (this.editInfo && this.editInfo.publicityId) this.getDetailInfo();
        }
    }

    formData: any = {};
    loading = false;
    rules = {};
    rulesDef = {
        number: [{ required: true, message: "请输入编号", trigger: "change" }],
        publicityTime: [{ required: true, message: "请选择时间", trigger: "change" }],
        conversionWay: [{ required: true, message: "请选择转化方式", trigger: "change" }],
        conversionIncomeTime: [{ required: true, message: "请选择时间", trigger: "change" }],
        gainConversionMoney: [{ required: true, message: "请输入转化金额", trigger: "change" }],
        cashBonusTime: [{ required: true, message: "请选择时间", trigger: "change" }],
        achievementAwardRental: [{ required: true, message: "请输入科技成果现金奖励总额", trigger: "change" }],
        contractRegisterInfo: [{ required: true, message: "请输入登记情况", trigger: "change" }],
        staffPublicity: [{ required: true, message: "请选择时间", trigger: "change" }],
    };
    userType = "";
    async mounted() {
        const userInfo = getStorageUserInfo();
        this.userType = userInfo.roleName === "管理员" || userInfo.roleName === "后台" ? "system" : "user";
        this.userListChage();
    }
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.loading = true;
        try {
            // const res = await warningApi.planAdd(this.sureInfo);
            // this.$message.success(res.msg);
            this.closeModal();
        } finally {
            this.loading = false;
        }
    }
    save(formulaAuditState) {
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) return;
            const listOne: any = this.userListOne.map((item, idx) => {
                return {
                    type: item.type,
                    contributionRatio: this.formData[`userListOne_${idx}_contributionRatio`],
                    identityCard: this.formData[`userListOne_${idx}_identityCard`],
                    name: this.formData[`userListOne_${idx}_name`],
                    gender: this.formData[`userListOne_${idx}_gender`],
                    post: this.formData[`userListOne_${idx}_post`],
                    schoolWithinOuter: this.formData[`userListOne_${idx}_schoolWithinOuter`],
                };
            });

            const data = {
                ...this.formData,
                id: this.rowInfo.id,
                formulaAwardList: listOne,
                formulaAuditState,
                publicityType: "KJR",
            };
            if (this.formData.staffPublicity&&this.formData.staffPublicity[0]) {
                data.staffPublicityBeginTime= this.formData.staffPublicity[0].format("YYYY-MM-DD")
                data.staffPublicityEndTime= this.formData.staffPublicity[1].format("YYYY-MM-DD")
            }
            if (this.editInfo && this.editInfo.publicityId) {
                data.publicityId = this.editInfo.publicityId;
            }
            this.loading = true;
            const res = await api.addFormulaInfo(data);
            this.loading = false;
            this.$message.success("保存成功");
            this.closeModal();
            this.$emit("resetList");
        });
    }

    async getDetailInfo() {
        this.loading = true;
        try {
            const res = await api.getAnMentList({
                id: this.rowInfo.id,
                publicityId: this.editInfo.publicityId,
                publicityType: "KJR",
            });
            const userListObj = {};
            this.userListOne = [];
            const auditData = res.data.auditData;
            auditData.awardList?.forEach((item, idx) => {
                userListObj[`userListOne_${idx}_name`] = item.name;
                userListObj[`userListOne_${idx}_gender`] = item.gender;
                userListObj[`userListOne_${idx}_schoolWithinOuter`] = item.schoolWithinOuter;
                userListObj[`userListOne_${idx}_post`] = item.post;
                userListObj[`userListOne_${idx}_identityCard`] = item.identityCard;
                userListObj[`userListOne_${idx}_contributionRatio`] = item.contributionRatio;
                this.userListOne.push({ type: "KJRY" });
            });
            if (this.userListOne.length === 0) this.userListOne = [{ type: "KJRY" }];
            let staffPublicity: any[] = [];
            if (auditData.staffPublicityBeginTime && auditData.staffPublicityEndTime) {
                staffPublicity = [moment(auditData.staffPublicityBeginTime), moment(auditData.staffPublicityEndTime)];
            }

            this.formData = { ...auditData, staffPublicity, ...userListObj };
        } finally {
            this.loading = false;
        }
    }

    getDayNum(key: string) {
        if (!this.formData[key]) return "";
        const startTime = new Date(this.formData[key][0]).getTime();
        const endTime = new Date(this.formData[key][1]).getTime();
        const day = (endTime - startTime) / (24 * 60 * 60 * 1000);
        return Math.ceil(day);
    }

    userListOne = [{ type: "KJRY" }];
    addUserOne() {
        this.userListOne.push({ type: "KJRY" });
        this.userListChage();
    }
    delUserOne(idx) {
        this.userListOne.splice(idx, 1);
        this.userListChage();
    }
    userListChage() {
        this.rules = { ...this.rulesDef };
        this.userListOne.forEach((item, idx) => {
            this.rules["userListOne_" + idx + "_name"] = [{ required: true, message: "请输入姓名", trigger: "change" }];
            this.rules["userListOne_" + idx + "_gender"] = [{ required: true, message: "请输入性别", trigger: "change" }];
            this.rules["userListOne_" + idx + "_schoolWithinOuter"] = [{ required: true, message: "请输入", trigger: "change" }];
            this.rules["userListOne_" + idx + "_post"] = [{ required: true, message: "请输入职务", trigger: "change" }];
            this.rules["userListOne_" + idx + "_identityCard"] = [
                { required: true, message: "请输入身份证号", trigger: "change" },
            ];
            this.rules["userListOne_" + idx + "_contributionRatio"] = [
                { required: true, message: "请输入贡献比例", trigger: "change" },
            ];
        });
    }
}
</script>

<style lang="scss">
.KJRDetail-edit {
    .small-title {
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        margin-top: 20px;
    }
    .small-row-box {
        display: flex;
        align-items: center;
    }
    .small-row-title {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }
    .user-panel-parent {
        display: flex;
    }
    .user-panel {
        background-color: #f7f7f7;
        padding: 15px;
        margin-top: 5px;
    }
    .user-panel-action {
        padding: 15px;
    }
    .user-info {
        display: inline-block;
        min-width: 150px;
        line-height: 30px;
        color: #82848a;
        margin-right: 40px;
    }
    .user-word {
        color: #333;
    }
    .disable-form {
        pointer-events: none;
    }
}
</style>
